<template>
    <view class="pageBox-vue">
        <uni-byt-top-com title="首页" :backShow="false"></uni-byt-top-com>
        <scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }">
            <view class="flex-col py-16 px-15">
                <!-- <view @click="toAiComponentsPage" class="flex-row items-center jty-btn px-12 bg-white py-14 bor-rad-8 mb-14">
                    <text class="text-14">ai对话组件(组件调用)</text>
                    <image class="wh-16" src="https://img.yummall.cn/baiyetong/rightJianAAA.png" mode=""></image>
                </view> -->
                <view @click="toAIPage" class="flex-row items-center jty-btn px-12 bg-white py-14 bor-rad-8 mb-14">
                    <text class="text-14">ai对话组件(页面调用)</text>
                    <image class="wh-16" src="https://img.yummall.cn/baiyetong/rightJianAAA.png" mode=""></image>
                </view>
                <view @click="toPage('uniBytPayPage')" class="flex-row items-center jty-btn px-12 bg-white py-14 bor-rad-8 mb-14">
                    <text class="text-14">支付控件</text>
                    <image class="wh-16" src="https://img.yummall.cn/baiyetong/rightJianAAA.png" mode=""></image>
                </view>
                <view @click="toPage('uniBytTopComPage')" class="flex-row items-center jty-btn px-12 bg-white py-14 bor-rad-8 mb-14">
                    <text class="text-14">头部组件</text>
                    <image class="wh-16" src="https://img.yummall.cn/baiyetong/rightJianAAA.png" mode=""></image>
                </view>
                <view @click="toPage('uniBytPasswordInput')" class="flex-row items-center jty-btn px-12 bg-white py-14 bor-rad-8 mb-14">
                    <text class="text-14">支付密码输入弹窗</text>
                    <image class="wh-16" src="https://img.yummall.cn/baiyetong/rightJianAAA.png" mode=""></image>
                </view>
                <view @click="toPage('uniBytCheckboxTree')" class="flex-row items-center jty-btn px-12 bg-white py-14 bor-rad-8 mb-14">
                    <text class="text-14">多选树形弹窗</text>
                    <image class="wh-16" src="https://img.yummall.cn/baiyetong/rightJianAAA.png" mode=""></image>
                </view>
                <view @click="toPage('uniBytDateRang')" class="flex-row items-center jty-btn px-12 bg-white py-14 bor-rad-8 mb-14">
                    <text class="text-14">时间区间选择</text>
                    <image class="wh-16" src="https://img.yummall.cn/baiyetong/rightJianAAA.png" mode=""></image>
                </view>
                <view @click="toPage('uniBytUploadImg')" class="flex-row items-center jty-btn px-12 bg-white py-14 bor-rad-8 mb-14">
                    <text class="text-14">单文件上传</text>
                    <image class="wh-16" src="https://img.yummall.cn/baiyetong/rightJianAAA.png" mode=""></image>
                </view>
                <view @click="toPage('uniBytUploadImgList')" class="flex-row items-center jty-btn px-12 bg-white py-14 bor-rad-8 mb-14">
                    <text class="text-14">多文件上传</text>
                    <image class="wh-16" src="https://img.yummall.cn/baiyetong/rightJianAAA.png" mode=""></image>
                </view>
                <view @click="toPage('uniBytTable')" class="flex-row items-center jty-btn px-12 bg-white py-14 bor-rad-8 mb-14">
                    <text class="text-14">表格组件</text>
                    <image class="wh-16" src="https://img.yummall.cn/baiyetong/rightJianAAA.png" mode=""></image>
                </view>
            </view>
        </scroll-view>

        <u-loading-page style="z-index: 999" :loading="loading"></u-loading-page>

        <!-- #ifndef MP -->
        <!-- AI助手 -->
        <!-- #ifdef VUE2 -->
        <byt-dialogueFloating agentId="1858423129794150401" :type.sync="floatingWindowType" :typeButton="true" :show.sync="floatingWindowShow"></byt-dialogueFloating>
        <!-- #endif -->
        <!-- #ifdef VUE3 -->
        <byt-dialogueFloating agentId="1858423129794150401" v-model:type="floatingWindowType" :typeButton="true" v-model:show="floatingWindowShow"></byt-dialogueFloating>
        <!-- #endif -->

        <view v-if="isFloatingWindow" @click="floatingWindowOpen" class="flex-col items-center posi-fix bottom-100 right-30 bg-white shadow border p-16 bor-rad-8">
            <view class="wh-30 bor-rad-round bg-main">
                <image class="wh-30" src="https://img.alicdn.com/imgextra/i2/O1CN01bYc1m81RrcSAyOjMu_!!6000000002165-54-tps-60-60.apng" mode=""></image>
            </view>
            <view class="w-30 text-center mt-12">
                <text>AI助手</text>
            </view>
        </view>
        <!-- #endif -->
    </view>
</template>

<script>
import BytDialogueFloating from '@/uni_modules/byt-ai-agent-uni/components/agent-dialogue/byt-dialogueFloating/byt-dialogueFloating.vue';
import { getHeight } from '@/util';
export default {
    components: {
        BytDialogueFloating
    },
    data() {
        return {
            loading: true,
            scrollHeight: getHeight(),
            floatingWindowShow: false,
            floatingWindowType: 1,

            // 是否显示悬浮ai窗口
            isFloatingWindow: false
        };
    },
    onLoad(play) {
        // #ifndef H5
        // 在非h5页面判断设备宽度
        const systemInfo = uni.getSystemInfoSync();
        if (systemInfo.screenWidth > 600) {
            this.isFloatingWindow = true;
        } else {
            this.isFloatingWindow = false;
            this.floatingWindowShow = false;
        }
        // #endif

        // #ifdef H5
        // 在h5页面判断视口宽度
        if (window.innerWidth > 600) {
            this.isFloatingWindow = true;
        } else {
            this.isFloatingWindow = false;
            this.floatingWindowShow = false;
        }
        // #endif

        console.log('我是组件演示页面：', play);
        if (play.urlKey) {
            if (play.backShow) {
                if (play.backShow == '1') {
                    this.toPage(play.urlKey);
                    return;
                }
            }
            uni.redirectTo({
                url: `/pagesComponents/${play.urlKey}/index`
            });
        } else {
            this.loading = false;
        }
    },
    methods: {
        // 打开AI组件悬浮窗口
        floatingWindowOpen() {
            console.log('打开AI组件悬浮窗口');
            this.floatingWindowShow = !this.floatingWindowShow;
        },
        // 前往Ai组件调用页面
        toAiComponentsPage() {
            uni.navigateTo({
                url: '/pages/aiComponentsPage/index'
            });
        },
        // 前往ai助手页面
        toAIPage() {
            uni.navigateTo({
                url: '/uni_modules/byt-ai-agent-uni/pages/listHome'
            });
        },
        // 前往常规组件页面
        toPage(urlKey) {
            uni.navigateTo({
                url: `/pagesComponents/${urlKey}/index?backShow=1`
            });
        }
    }
};
</script>

<style scoped></style>
